<template>
    <div class="group-list">
        <el-tabs id="statusTab" v-model="grouperStatus" tab-position="top">
            <el-tab-pane label="群主列表" name="1"></el-tab-pane>
            <el-tab-pane label="群主审核" name="0"></el-tab-pane>
        </el-tabs>
        <el-form ref="filterForm" class="filter-form" :model="filterForm" label-width="80px" size="small">
            <el-row type="flex" justify="space-between">
                <el-col :span="5">
                    <el-form-item label="手机号">
                        <el-input v-model="filterForm.phoneNo"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="姓名">
                        <el-input v-model="filterForm.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="城市">
                        <el-cascader v-model="selectedCity" expand-trigger="hover" :options="citys" :show-all-levels="false" :props="cityProps" @change="cityChanged">
                        </el-cascader>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="微信号">
                        <el-input v-model="filterForm.wxid"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4" class="text-center">
                    <el-button size="small" type="default" @click="resetForm">重置</el-button>
                    <el-button size="small" type="primary" @click="filterCourse">搜索</el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="name" label="真实姓名"></el-table-column>
            <el-table-column prop="wxid" label="微信号"></el-table-column>
            <el-table-column prop="phoneNo" label="手机号"></el-table-column>
            <el-table-column prop="city" label="地区"></el-table-column>
            <el-table-column prop="num" label="学员数"></el-table-column>
            <el-table-column label="加入时间">
                <template slot-scope="{row}">
                    {{row.createTime | dateFormat('yyyy-MM-dd')}}
                </template>
            </el-table-column>
            <el-table-column v-if="grouperStatus!=1" label="申请状态">
                <template slot-scope="{row}">
                    {{row.status == 2 ? '已驳回' : '待审核'}}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="{row, $index}">
                    <div v-if="row.status != 0">
                        <el-button @click="$router.push('/group/students/'+row.id)" type="text" size="small">学员列表</el-button>
                        <el-button v-if="row.status == 1" @click="lockHolder(row.id, $index)"  size="small" type="text">冻结</el-button>
                        <el-button v-if="row.status == 3" @click="unlockHolder(row.id,  $index)"  size="small" type="text">解除冻结</el-button>
                    </div>
                    <div v-if="row.status == 0">
                        <el-button @click="passRegister(row.id)" type="primary" size="mini">通过</el-button>
                        <el-button @click="rejectRegister(row.id)" type="warning" size="mini">驳回</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-if="totalCount > 20" layout="prev, pager, next" :page-size="20" :total="totalCount" @current-change="pageChange"></el-pagination>
        <!-- <el-button size="mini" type="primary">新增课程</el-button> -->
    </div>
</template>

<script>
    import citys from '@/assets/citys'
    import { passHolders, rejectHolders, selectNotPassHolders, selectPassHolders, deleteHolders } from '@/api'
    export default {
        data() {
            return {
                grouperStatus: '1',
                filterForm: {
                    phoneNo: '',
                    city: '',
                    name: '',
                    wxid: ''
                },
                filterPms: {
                    phoneNo: '',
                    city: '',
                    name: '',
                    wxid: '',
                    limit: 20,
                    offset: 0
                },
                citys,
                cityProps: {
                    value: 'name',
                    label: 'name',
                    children: 'children'
                },
                removePopoverVisible: false,
                selectedCity: [],
                totalCount: 0,
                tableData: []
            }
        },
        watch: {
            'grouperStatus': {
                handler: function(status) {
                    this.selectedCity = []
                    this.filterPms = {
                        phoneNo: '',
                        city: '',
                        name: '',
                        wxid: '',
                        limit: 20,
                        offset: 0
                    }
                    if (status == 1) {
                        this.selectPassHolders()
                    } else {
                        this.selectNotPassHolders()
                    }
                },
                immediate: true
            }
        },
        mounted() {
            // this.initNewTab()
        },
        methods: {
            selectPassHolders() {
                selectPassHolders(this.filterPms).then(res => {
                    this.tableData = res.data.result.detail
                    this.totalCount = res.data.result.totalCount
                })
            },
            selectNotPassHolders() {
                selectNotPassHolders(this.filterPms).then(res => {
                    this.tableData = res.data.result.detail
                    this.totalCount = res.data.result.totalCount
                })
            },
            cityChanged(v) {
                this.filterForm.city = v[1]
            },
            resetForm(){
                this.filterForm = {
                    phoneNo: '',
                    city: '',
                    name: '',
                    wxid: ''
                }
                this.selectedCity = []
            },
            filterCourse() {
                this.filterPms = Object.assign(this.filterPms, this.filterForm)
                if (this.grouperStatus == 1) {
                    this.selectPassHolders()
                } else {
                    this.selectNotPassHolders()
                }
            },
            pageChange(v) {
                this.filterPms.offset = (v - 1) * 20
                if (this.grouperStatus == 1) {
                    this.selectPassHolders()
                } else {
                    this.selectNotPassHolders()
                }
            },
            passRegister(id){
                passHolders({id}).then(() => {
                    this.selectNotPassHolders()
                })
            },
            rejectRegister(id){
                rejectHolders({id}).then(() => {
                    this.selectNotPassHolders()
                })
            },
            lockHolder(id, index){
                this.$confirm('您确定要冻结此群主？', '提示').then(() => {
                    deleteHolders({id}).then(()=>{
                        this.tableData[index].status = 3
                    })
                })
            },
            unlockHolder(id, index){
                this.$confirm('您确定要解除冻结？', '提示').then(() => {
                    passHolders({id}).then(()=>{
                        this.tableData[index].status = 1
                    })
                })
            }
        },
    }
</script>

<style scoped lang="scss">
    .group-list /deep/ {
        .el-tabs__nav {
            width: 100%;
        }

        .filter-form {
            width: 100%;
        }

        .el-pagination {
            text-align: right;
            padding: 20px 5px;
        }
    }
</style>